<template>
  <div class="index-box d-flex" ref="index">
   <!-- <div class="leftBox" :style="{'width': leftTreeShow?'200px':'0px'}">
        <div class="tree-box">
          <el-tree :data="treeList" :props="defaultProps" current-node-key="" node-key="categoryId" ref="leftTree" :expand-on-click-node="false" default-expand-all @node-click="handleNodeClick"></el-tree>
        </div>
    </div> -->
    <div class="rightBox">
        <div class="table-box" >
          <div class="search" ref="search">

            <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
              class="demo-form-inline" id="searchBox">
              <!-- <MyLeftTreeRetract :leftTreeShow.sync="leftTreeShow"></MyLeftTreeRetract> -->
              <el-form-item prop="goodsCode">
                <el-input v-model="searchForm.goodsCode" clearable placeholder="请输入商品编号"></el-input>
              </el-form-item>
              <el-form-item prop="goodsName">
                <el-input v-model="searchForm.goodsName" clearable placeholder="请输入商品名称"></el-input>
              </el-form-item>
              <el-form-item prop="storeName">
                <el-input v-model="searchForm.storeName" clearable placeholder="请输入商家名称"></el-input>
              </el-form-item>
              <!-- <el-form-item prop="auditUserName">
                <el-input v-model="searchForm.auditUserName" clearable placeholder="请输入审核人信息"></el-input>
              </el-form-item> -->
            <!--  <el-form-item prop="goodsState">
                <el-select filterable clearable v-model="searchForm.goodsState" placeholder="全部上/下架">
                  <el-option label="已上架" value="1" ></el-option>
                  <el-option label="已下架" value="2" ></el-option>
                </el-select>
              </el-form-item> -->

              <el-form-item prop="time">
                <el-date-picker v-model="time" type="daterange" align="right" unlink-panels range-separator="至"
                  start-placeholder="审核开始日期" end-placeholder="审核结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>


              <el-form-item class="clearfix">
                <el-button type="primary" @click="handleSearch()" icon="el-icon-search">查询</el-button>
                <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
              </el-form-item>


              <el-form-item style="margin-left: auto;">
               <MyRefresh/>
               <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn" :tableColumnType.sync="tableColumnType"></MyTableColumnSet>
              </el-form-item>

            </el-form>
          </div>
          <div class="table" ref="table">
            <el-table :data="dataList" style="width: 100%;" row-key="id" border :height="tableHeight"  default-expand-all stripe v-loading="loading">
              <el-table-column prop="goodsCode" label="商品编号" v-if="!hideTableColumn.includes('number')" width="210"></el-table-column>
              <el-table-column prop="name" label="商品图片" v-if="!hideTableColumn.includes('img')" width="90">
                <template #default="scope">
                   <el-image :src="scope.row.goodsImage" fit="fill" v-image-preview="scope.row.goodsImage" class="img"></el-image>
                </template>
              </el-table-column>
              <el-table-column prop="goodsName" label="商品名称" v-if="!hideTableColumn.includes('name')">
                <template #default="scope">
                  <span class="ellipsis-item2" :title="scope.row.goodsName">{{scope.row.goodsName}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="storeName" label="商家门店名称" v-if="!hideTableColumn.includes('shopName')" align="center" width="200" show-overflow-tooltip></el-table-column>
               <!-- <el-table-column prop="storeTypeName" label="商家类型" v-if="!hideTableColumn.includes('shopType')" align="center" width="100"></el-table-column>
              <el-table-column prop="memberName" label="会员类型" v-if="!hideTableColumn.includes('memberType')" align="center" width="120"></el-table-column> -->
              <el-table-column prop="originalPrice" label="原价(元)" v-if="!hideTableColumn.includes('original')"  align="center" width="120"></el-table-column>
            <!--  <el-table-column prop="costPrice" label="供货价(元)" v-if="!hideTableColumn.includes('retail')"  align="center" width="120"></el-table-column> -->
              <el-table-column prop="salePrice" label="平台售价(元)" v-if="!hideTableColumn.includes('platformFor')"  align="center" width="120"></el-table-column>
             <!-- <el-table-column prop="name" label="上/下架" v-if="!hideTableColumn.includes('upDownStatus')" align="center" width="120">
                <template #default="scope">
                    <span @click="handleChangeUpDownStatus(scope.row,$event)" :class="scope.row.goodsState=='2'?'down':'up'" :id="hasBtn('shop:shopSearch:stand')">{{scope.row.goodsState=='2'?'已下架':'已上架'}}</span>
                </template>
              </el-table-column> -->
              <el-table-column prop="auditBy" label="审核人信息"  align="center" width="120"></el-table-column>
              <el-table-column prop="name" label="审核时间" v-if="!hideTableColumn.includes('time')" align="center" width="170">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.auditTime) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="操作" v-if="!hideTableColumn.includes('active')" width="160" align="center" fixed="right">
                <template #default="scope">
                    <el-button
                      type="text"
                      icon="el-icon-s-order"
                      @click="handleGoShopDetail(scope.row)"
                    >查看</el-button>
                   <!-- <el-button
                      type="text"
                      icon="el-icon-s-tools"
                      @click="handleSet(scope.row)"
                    >设置</el-button> -->
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="page" ref="page">
            <MyPagination
               :total="total"
               :page.sync="searchForm.pageNum"
               :limit.sync="searchForm.pageSize"
               @pagination="dataInfo"
             />
          </div>
        </div>
    </div>



  </div>
</template>

<script>
  import common from '@/api/api';
  import { BgetGoodsList } from '@/api/getData';
  import option from '../../common/option.js';
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    components: { Treeselect },
    data() {
      return {
        loading: false,
        leftTreeShow:true,
        btnLoading:false,
        tableColumn:[],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        time:[],
        searchForm: {
          auditState:'',
          auditUserName:'',
          auditTime:'',
          auditUserName:'',
          goodsCategoryId: '',
          goodsCode: '',
          goodsName:'',
          goodsState:'',
          goodsType:'',
          memberLevel:'',
          storeCategoryId:null,
          storeName:'',
          goodsType:0,

          sort:'',
          pageNum: 1,
          pageSize: 20,
        },
        treeList: [],
        tableHeight:0,//table 高度
        dataList:[],
        total: 0,
        defaultProps: {
           children: 'children',
           label: 'name'
        },
        multipleSelection: '',
        storeListOptions:[],
        levelList:[],
        setVisible:false,
        setForm:{
          goodsId:'',
          whetherAllotCommission:'',
          whetherAllotPoints:'',
          whetherBuyNeedPoints:'',
          buyNeedPoints:'',
        },
        setRules: {
         whetherAllotCommission: [{required: true, message: '请选择是否分配佣金',trigger: 'blur'}],
         whetherAllotPoints: [{required: true, message: '请选择是否分配积分',trigger: 'blur'}],
         whetherBuyNeedPoints: [{required: true, message: '请选择是否购买所需额外积分',trigger: 'blur'}],
         buyNeedPoints: [{required: true, message: '请输入购买所需额外积分数',trigger: 'blur'}]
        },
      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      //this.getSelect();
      this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight - this.$refs.page.offsetHeight - 35;
      })
    },
    methods: {
      changeWhetherBuyNeedPoints(){
        this.setForm.buyNeedPoints = 0;
      },
      handleSet(row){
        this.setForm.goodsId = row.goodsId;
        this.setForm.whetherAllotCommission = row.whetherAllotCommission;
        this.setForm.whetherAllotPoints = row.whetherAllotPoints;
        this.setForm.whetherBuyNeedPoints = row.whetherBuyNeedPoints;
        this.setForm.buyNeedPoints = row.buyNeedPoints;
        this.setVisible = true;
      },
      handleSetSubmit(formName){
        this.$refs[formName].validate(async(valid) => {
          if (valid) {
            this.btnLoading = true;
            let result = await settingPointsOrCommission(this.setForm);
            if (result.code == 200) {
              this.$message.success(result.msg);
              this.setVisible = false;
              this.dataInfo();
            } else {
              this.$message.error(result.msg);
            }
            this.btnLoading = false;

          }
        })
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.time = [];
        this.resetForm("searchForm");
        this.dataInfo();
      },
      /** 查询菜单列表 */
      getList() {
        listMenu(this.queryParams).then(response => {
          this.menuList = this.handleTree(response.data, "menuId");
        });
      },
      /** 转换菜单数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.categoryId,
          label: node.name,
          children: node.children
        };
      },
      handleGoShopDetail(row){
        console.log(row.goodsId);
          this.$router.push({path:'/shop/shopDetails',query:{goodsId:row.goodsId}});
      },
      /** 上下架 **/
      async handleChangeUpDownStatus(row,e) {
        try {
          if(e.currentTarget.id == 'true'){
              this.$confirm(`您确定要${row.goodsState=='2'?'上架':'下架'}?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                let data = {
                  goodsId : row.goodsId,
                  status: row.goodsState=='1'?'2':'1'
                }
                updateGoodsStatus(data).then((result)=>{
                    if (result.code == 200) {
                      this.$message.success(result.msg);
                       row.goodsState=='1'?(row.goodsState='2'):(row.goodsState='1');
                    } else {
                      this.$message.error(result.msg);

                    }
                })

            }).catch(() => {

            });
          }else{
               this.$message.error('没有权限请联系管理员！');
          }

        } catch (err) {
          console.log(err)
        }
      },
      async dataInfo() {
        try {
          let data = this.addDateRange(this.searchForm, this.time, 'startAuditTime', 'endAuditTime');
          this.loading = true;
          const result = await BgetGoodsList(data);
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      handleSearch() {
        this.page = 1;
        this.dataInfo();
      },
      resetFormDialog(formName) {
        this.$refs[formName].resetFields();
      },
      /** 树节点点击事件 **/
      handleNodeClick(data){
        console.log(data);
        this.searchForm.goodsCategoryId = data.categoryId;
        this.searchForm.page = 1;
        this.dataInfo();
      },

      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

    }
  }
</script>

<style scoped lang="scss">
  .tableDialog /deep/ .el-table__header-wrapper  .el-checkbox{//找到表头那一行，然后把里面的复选框隐藏掉
      display:none
    }
  .index-box{
    padding:0px!important;
    margin-left:0px;
  }
  .tree-box /deep/ .el-tree-node{
     background: #D8E4DD;
  }
  .tree-box> /deep/ .el-tree>.el-tree-node{
    padding:10px;
  }
  .tree-box> /deep/ .el-tree .is-current{
    background:#fff;
  }
  .table-box{
    padding:15px
  }
  .down{
    color: #909399;
    cursor: pointer;
    text-decoration:underline;
  }
  .down:hover{
    color: #a6a9ad;
  }
  .up{
    color:#61997A;
    cursor: pointer;
    text-decoration:underline;
  }
  .up:hover{
    color:#81ad95;
  }
</style>
